<template>
  <div class="swipe_item">
    <slot></slot>
    <slot name="left"></slot>
    <slot name="right"></slot>
  </div>
</template>

<script setup>

</script>

<style lang="scss">
.swipe_item {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;

  &:nth-child(odd) {
    background-color: #66c6f2;
  }

  &:nth-child(even) {
    background-color: #39a9ed;
  }

  .video_intro {
    width: 75%;
    position: absolute;
    bottom: 80px;
    left: 8px;


    .video_intro__city {
      font-size: 16px;
    }

    .video_intro__username {
      font-size: 16px;
    }

    .video_intro__desc {
      font-size: 14px;
      // 超过三行省略号
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }

  .video_operation {
    width: 60px;
    position: absolute;
    bottom: 100px;
    right: 8px;
    display: flex;
    flex-direction: column;

    .video_operation__item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 75px;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }

      span {
        font-size: 14px;
      }

      .jia-icon {
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }

  // 点赞动画容器
  .like-wrapper {
    position: relative;

    // 缩放动画定义
    &.animated {
      animation: scaleBeat 0.6s ease-out;
      // 防止动画重复触发时失效
      transform-origin: center;
    }
  }

  // 心跳式缩放动画
  @keyframes scaleBeat {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.2);
    }

    70% {
      transform: scale(0.9);
    }

    100% {
      transform: scale(1);
    }
  }
}
</style>